JavaScript,Ruby,Ruby on Rails blog

| 前端, 前端工程

Webpack 配置

Webpack 配置

package.json

1
2
3
4
5
6
7
8
9
10
cnpm install css-loader style-loader sass-loader node-sass --save-dev
cnpm install postcss-loader
cnpm install autoprefixer-loader
cnpm install precss-loader
cnpm install babel-loader --save-dev
cnpm install babel-preset-es2015 babel-preset-react --save-dev
cnpm install react react-dom --save
cnpm install bootstrap@4.0.0-alpha.2 --save-dev
cnpm install url-loader --save-dev
cnpm install extract-text-webpack-plugin --save

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");  //分离Style
var autoprefixer = require('autoprefixer');
var precss = require('precss');

//当前项目地址
var ROOT_PATH = path.resolve(__dirname);
//开发目录
var APP_PATH = path.resolve(ROOT_PATH, './src');
//生成目录
var BUILD_PATH = path.resolve(ROOT_PATH, './build');

module.exports = {
    entry: {
        app: path.resolve(APP_PATH, './index.js')
    },
    output: {
        path: BUILD_PATH,
        filename: 'bundle.js'
    },
    devtool: "eval-source-map",
    module: {
        loaders:[{
                //处理SCSS
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader!postcss-loader"),
                include: APP_PATH
            },{
                //处理JSX
                test: /\.jsx?$/,
                loader: 'babel',
                include: APP_PATH,
                query: {
                    presets: ['es2015', 'react']
                }
            },{    
                test: /\.(png|jpg)$/,    
                loader: 'url?limit=400000'
            }
        ]
    },
    postcss: function () {
        return [autoprefixer, precss];
    },
    resolve: {
        extensions: ['', '.js', '.jsx', '.scss']
    },
    plugins: [new ExtractTextPlugin('css.css')]
}

运行webpack

1
sudo webpack

监控webpack

1
sudo webpack -w

压缩JavaScript

1
sudo webpack -p

Comments